<template>
  <div class="heal-guidance-program">
    <div class="my-program" v-if="dataList">
      <div class="cons-items" style="width: 1513px">
        <div class="header-cantainer">
          <div class="cantainer-c">
            <div><img class="img-header" src="" alt="" /></div>
            <div class="my-title"><span>我的方案</span></div>
          </div>
          <div style="margin-left: 24px">
            <div class="su-mu">
              <span>运动目标</span>
              <span class="padding-left">{{spotTarget}}</span>
            </div>
            <div class="su-mu">
              <div>注意事项</div>
              <div style="margin-left: 9px" class="tip">
                <span
                  >{{note}}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="item-response">
          <div class="sub-itemss">
            <div
              class="sub-item"
              style="margin-top: 15px"
              v-for="(item, index) in prescription"
              :key="index"
            >
              <div class="s-header">
                <span>第{{ index == 0 ? "一" : index == 1 ? "二" : index == 2 ? "三" : index == 3 ? '四' : index == 4 ? '五' : '六' }}天</span>
                <!-- <span class="total-week">共三天</span> -->
              </div>
              <div class="childrens">
                <div
                  class="child-item"
                  v-for="(tem, i) in item.prescriptionDetail"
                  :key="i"
                >
                  <div class="con">
                    <div class="icon-h-row">
                      <div class="img-box" v-show="tem.sportCode == '跳绳'">
                        <img src="../../../assets/img/motion_icon.png" alt="" />
                      </div>
                      <div class="img-box" v-show="tem.sportCode == '深蹲'">
                        <img src="../../../assets/img/duntio.png" alt="" />
                      </div>
                      <div
                        class="img-box"
                        v-show="tem.sportCode != '跳绳' && tem.sportCode != '深蹲'"
                      >
                        <img src="../../../assets/img/yangwo.png" alt="" />
                      </div>
                      <div class="str-box">
                        <span class="name">运动项目</span>
                        <span class="name-str"
                          >{{ tem.sportCode
                          }}<span style="font-size: 14px"
                            >（跳{{ tem.sportDuration || '' }}分钟休息{{
                              tem.restDuration
                            }}分钟）</span
                          ></span
                        >
                      </div>
                    </div>
                    <div class="desc-items">
                      <div class="field">
                        <span class="label">运动强度</span>
                        <span class="val">中</span>
                      </div>
                      <div class="field">
                        <span class="label">运动时长（分钟）</span>
                        <span class="val">{{ tem.sportDuration }}</span>
                      </div>
                      <div class="field">
                        <span class="label">每次个数（个）</span>
                        <span class="val">{{ tem.times }}</span>
                      </div>
                      <div class="field">
                        <span class="label">每天频率（次/周）</span>
                        <span class="val">{{ tem.repeatTimes }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="sub-item">
              <div class="s-header second-bg">
                <span>第二天</span>
                <span class="total-week">共三天</span>
              </div>
              <div class="con">
                <div class="icon-h-row">
                  <div class="img-box">
                    <img src="../../../assets/img/motion_icon.png" alt="" />
                  </div>
                  <div class="str-box">
                    <span class="name">运动项目</span>
                    <span class="name-str">跳绳</span>
                  </div>
                </div>
                <div class="desc-items">
                  <div class="field">
                    <span class="label">运动强度</span>
                    <span class="val">中</span>
                  </div>
                  <div class="field">
                    <span class="label">运动时长（分钟）</span>
                    <span class="val">30</span>
                  </div>
                  <div class="field">
                    <span class="label">每次个数（个）</span>
                    <span class="val">150</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <div class="s-header third-bg">
                <span>第三天</span>
                <span class="total-week">共三天</span>
              </div>
              <div class="con">
                <div class="icon-h-row">
                  <div class="img-box">
                    <img src="../../../assets/img/motion_icon.png" alt="" />
                  </div>
                  <div class="str-box">
                    <span class="name">运动项目</span>
                    <span class="name-str">跳绳</span>
                  </div>
                </div>
                <div class="desc-items">
                  <div class="field">
                    <span class="label">运动强度</span>
                    <span class="val">中</span>
                  </div>
                  <div class="field">
                    <span class="label">运动时长（分钟）</span>
                    <span class="val">30</span>
                  </div>
                  <div class="field">
                    <span class="label">每次个数（个）</span>
                    <span class="val">150</span>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="other-panel" v-if="dataList">
      <div class="tit">当日目标</div>
      <div class="today-targets">
        <div class="row" v-for="(item, index) in projectList" :key="index">
          <div class="item main-item">
            <div class="act-img-box" v-show="item.sportCode == '跳绳'">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/motion_icon.png"
                alt=""
              />
            </div>
            <div class="act-img-box" v-show="item.sportCode == '深蹲'">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/duntio.png"
                alt=""
              />
            </div>
            <div
              class="act-img-box"
              v-show="item.sportCode != '跳绳' && item.sportCode != '深蹲'"
            >
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/yangwo.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">{{ item.sportCode }}</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>{{ item.sportDurationTarget }}分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">{{ item.sportDurationScore * 100 }}%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>跳绳{{ item.sportTimesTarget }}个</span>
              <span>{{ item.sportTimes }}/{{ item.sportTimesTarget }}次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 10%"></div>
              <span class="val">{{ item.sportTimesScore * 100 }}</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
        <div class="row" v-if="false">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/yangwoqizuo.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">仰卧起坐</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>5分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>仰卧起坐30个</span>
              <span>20/30次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 30%"></div>
              <span class="val">30%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>20次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 40%"></div>
              <span class="val">40%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dob-chart-box" id="cc" v-if="dataList">
      <div class="left">
        <div id="todayActStrengthChart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div class="chart-tabs">
          <span
            :class="falg == index ? 'active' : ''"
            @click="getTab(index)"
            v-for="(item, index) in lineList"
            :key="index"
            >{{ item }}</span
          >
          <!-- <span>立定跳远</span> -->
        </div>
        <div class="sub-chart-box">
          <div id="actCompleteRateChart" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>

    <div class="other-panel" v-if="dataList">
      <div class="tit">本周目标</div>
      <div class="today-targets">
        <div class="row" v-for="(item, index) in weekList" :key="index">
          <div
            class="item main-item"
            style="width: 730px; justify-content: space-between"
          >
            <div class="act-cons">
              <div style="display: flex" class="ac-name">
                <div style="color: #2f5a54; font-size: 18px; font-weight: 400">
                  <span>运动项目：</span>
                </div>
                <div
                  style="display: flex; color: #2f5a54; font-size: 18px; font-weight: 400"
                >
                  <span
                    style="padding-left: 5px"
                    v-for="(ite, i) in item.sprotCode"
                    :key="i"
                    >{{ ite }}</span
                  >
                </div>
              </div>
            </div>
            <div style="display: flex">
              <div v-for="(ite, i) in item.sprotCode" :key="i">
                <div class="act-img-box" v-show="ite == '跳绳'">
                  <img
                    style="width: 70px; height: 70px"
                    src="../../../assets/img/motion_icon.png"
                    alt=""
                  />
                </div>
                <div class="act-img-box" v-show="ite == '深蹲'">
                  <img
                    style="width: 70px; height: 70px"
                    src="../../../assets/img/duntio.png"
                    alt=""
                  />
                </div>
                <div class="act-img-box" v-show="ite != '跳绳' && ite != '深蹲'">
                  <img
                    style="width: 70px; height: 70px"
                    src="../../../assets/img/yangwo.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>{{ item.sportDuration ? item.sportDuration.sportDuration : ''  }}分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">{{ item.sportDuration ? (item.sportDuration.sportDurationScore * 100).toFixed(1) : '0' }}%</span>
            </div>
          </div>
          <!-- <div class="item sub-item2">
            <div class="top-desc">
              <span>跳绳500个</span>
              <span>100/500次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div> -->
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
        <div class="row" v-if="false">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/yangwoqizuo.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span>运动项目</span>
              <span class="name">仰卧起坐</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>5分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item2">
            <div class="top-desc">
              <span>仰卧起坐30个</span>
              <span>20/30次</span>
            </div>
            <div class="progress-bar progress-bar2">
              <div class="bar" style="width: 30%"></div>
              <span class="val">30%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>20次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 40%"></div>
              <span class="val">40%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dob-chart-box" v-if="dataList">
      <div class="left">
        <div class="tit">平均运动强度</div>
        <div id="avgActStrengthChart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <!-- <div class="chart-tabs">
          <span class="active">跳绳</span>
          <span>立定跳远</span>
        </div> -->
        <div class="sub-chart-box">
          <div id="exerciseIntensityChart" style="width: 100%; height: 100%"></div>
          <!-- <div
            id="actCompleteRateChart2"
            style="width: 100%; height: 100%"
          ></div> -->
        </div>
      </div>
    </div>

    <div class="other-panel" v-if="false">
      <div class="tit">本期目标</div>
      <div class="today-targets current-period">
        <div class="row">
          <div class="item main-item">
            <div class="act-img-box">
              <img
                style="width: 70px; height: 70px"
                src="../../../assets/img/actrun.png"
                alt=""
              />
            </div>
            <div class="act-con">
              <span class="status">锻炼中</span>
              <span class="distince">距离结束还有5天</span>
            </div>
          </div>
          <div class="item sub-item1">
            <div class="top-desc">
              <span>运动时长</span>
              <span>85分钟</span>
            </div>
            <div class="progress-bar progress-bar1">
              <div class="bar" style="width: 10%"></div>
              <span class="val">10%</span>
            </div>
          </div>
          <div class="item sub-item3">
            <div class="top-desc">
              <span>运动强度</span>
              <span>30次/分钟</span>
            </div>
            <div class="progress-bar progress-bar3">
              <div class="bar" style="width: 20%"></div>
              <span class="val">20%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dob-chart-box" v-if="false">
      <div class="left">
        <div id="exerciseIntensityChart" style="width: 100%; height: 100%"></div>
      </div>
      <div class="right">
        <div id="completeRateChart" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div class="sign-in-records" v-if="dataList">
      <div class="tit">打卡记录</div>
      <div class="types">
        <span class="no-sign">未打卡</span>
        <span class="no-cpltoday-target">未完成当日目标</span>
        <span class="cpltoday-target">完成当日目标</span>
        <span class="exceed">超过目标30%</span>
      </div>
      <div class="sign-calendars">
        <div class="calendar-item" v-for="(item, idx) in calendarData" :key="idx">
          <div
            class="tit"
            >
            {{ item.timestr }}
          </div>

          <div class="calendar-box">
            <div
              class="week-items">
              <span>日</span>
              <span>一</span>
              <span>二</span>
              <span>三</span>
              <span>四</span>
              <span>五</span>
              <span>六</span>
            </div>
            <div
              class="week-days"
              v-show="item.timestr == tepii.timestr"
              v-for="(tepii, ii) in recordList"
              :key="ii"
            >
              <span
                @click="tabDay(dayItem)"
                v-for="(dayItem, dix) in item.list"
                :key="dix"
                :class="dayItem.otherMonth != 'nowMonth' ? 'other-day' : dayItem.type"
                >{{ dayItem.day }}</span
              >
            </div>
          </div>
          <!-- <table>
            <thead>
              <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><a class="other-day">31</a></td>
                <td><a class="cpl-clr">1</a></td>
                <td><a class="no-sign-clr">2</a></td>
                <td><a class="cpl-clr">3</a></td>
                <td><a class="cpl-clr">4</a></td>
                <td><a class="cpl-clr">5</a></td>
                <td><a class="no-cpl-clr">6</a></td>
              </tr>
              <tr>
                <td><a class="cpl-clr">7</a></td>
                <td><a class="cpl-clr">8</a></td>
                <td><a class="no-sign-clr">9</a></td>
                <td><a class="cpl-clr">10</a></td>
                <td><a class="no-cpl-clr">11</a></td>
                <td><a class="no-sign-clr">12</a></td>
                <td><a class="exceed-clr">13</a></td>
              </tr>
              <tr>
                <td><a class="cpl-clr">14</a></td>
                <td><a class="no-sign-clr">15</a></td>
                <td><a class="cpl-clr">16</a></td>
                <td><a class="cpl-clr">17</a></td>
                <td><a class="cpl-clr">18</a></td>
                <td><a class="no-cpl-clr">19</a></td>
                <td><a class="exceed-clr">20</a></td>
              </tr>
              <tr>
                <td><a class="cpl-clr">21</a></td>
                <td><a class="no-cpl-clr">22</a></td>
                <td><a class="cpl-clr">23</a></td>
                <td><a class="no-sign-clr">24</a></td>
                <td><a class="cpl-clr">25</a></td>
                <td><a class="cpl-clr">26</a></td>
                <td><a class="cpl-clr">27</a></td>
              </tr>
              <tr>
                <td><a class="exceed-clr">28</a></td>
                <td><a class="other-day">1</a></td>
                <td><a class="other-day">2</a></td>
                <td><a class="other-day">3</a></td>
                <td><a class="other-day">4</a></td>
                <td><a class="other-day">5</a></td>
                <td><a class="other-day">6</a></td>
              </tr>
            </tbody>
          </table> -->
        </div>
      </div>
    </div>
    <div class="empty-proc" v-else>
        <el-button class="create-proc-btn" @click="toCreate">新建健康方案</el-button>
    </div>
  </div>
</template>

<script>
import * as echarts from "_echarts@5.2.2@echarts";
import timeUtil from "@/utils/calendar";
export default {
  data() {
    return {
      dayClrs: {
        "cpl-clr": "cpl-clr",
      },
      myDate: null,
      historyChose: [],
      markDate: [],
      markDateMore: [],
      todayActStrengthChart: null,
      completeRateChart: null,
      exerciseIntensityChart: null,
      calendarData: [],
      projectList: [],
      lineList: [],
      lineyList: [],
      falg: 0,
      sportTimesScore: "",
      sportDurationScore: "",
      prescription: [],
      spotTarget: '',
      note: '',
      weekList: [],
      Ratio_sportTimesScore: "",
      Ratio_sportDurationScore: "",
      recordList: [],
      date: '',
      dataList: {}
    };
  },
  mounted() {
    let that = this;
    console.log("echarts");
    console.log(echarts);
    that.date = this.getNowTime()
    this.$nextTick(() => {
      // that.initActCompleteRateChart();
      that.initTodayActStrengthChart();
      // that.initCompleteRateChart();
      that.initExerciseIntensityChart();
      // 新增数据处理
      that.getStudent_record();
      that.getStudent_plan();
      that.getStudent_project();
      that.getStudent_week();
      that.getStudent_sprotRatio();
    });
    //构造日历数据
    this.myDate = new Date();
    let list = [];
    let _list = this.getList(this.myDate);
    // _list[8].type = "cpl-clr";
    // _list[9].type = "no-sign-clr";
    // _list[10].type = "cpl-clr";
    // _list[11].type = "no-cpl-clr";
    list.push({
      timestr: new this.moment(this.myDate).format("YYYY年MM月"),
      list: _list,
    });
    this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() - 1));
    _list = this.getList(new Date(this.myDate));
    // _list[2].type = "cpl-clr";
    // _list[9].type = "no-sign-clr";
    // _list[15].type = "cpl-clr";
    // _list[11].type = "no-cpl-clr";
    list.push({
      timestr: new this.moment(this.myDate).format("YYYY年MM月"),
      list: _list,
    });
    this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() - 1));
    _list = this.getList(new Date(this.myDate));
    // _list[7].type = "cpl-clr";
    // _list[8].type = "no-sign-clr";
    // _list[9].type = "cpl-clr";
    // _list[10].type = "no-cpl-clr";
    // _list[11].type = "no-cpl-clr";
    // _list[12].type = "no-cpl-clr";
    list.push({
      timestr: new this.moment(this.myDate).format("YYYY年MM月"),
      list: _list,
    });
    this.myDate = new Date(this.myDate.setMonth(this.myDate.getMonth() - 1));
    _list = this.getList(new Date(this.myDate));
    // _list[4].type = "cpl-clr";
    // _list[8].type = "no-sign-clr";
    // _list[9].type = "cpl-clr";
    // _list[10].type = "cpl-clr";
    // _list[11].type = "cpl-clr";
    // _list[12].type = "no-cpl-clr";
    // _list[13].type = "no-cpl-clr";
    // _list[18].type = "no-cpl-clr";
    // _list[19].type = "no-cpl-clr";
    // _list[20].type = "cpl-clr";
    list.push({
      timestr: new this.moment(this.myDate).format("YYYY年MM月"),
      list: _list,
    });
    console.log(list, "list");
    this.calendarData = list.reverse();
  },
  methods: {
    tabDay(val){
      let that = this
      that.projectList= []
      that.lineList=[]
      that.lineyList=[]
      that.falg=0
      that.sportTimesScore=""
      that.sportDurationScore= ""
      that.prescription=[]
      that.spotTarget= ''
      that.note=''
      that.weekList=[]
      that.Ratio_sportTimesScore = ""
      that.Ratio_sportDurationScore = ""
      that.date = val.date.replace(/\//g,"-")
      that.getStudent_plan();
      that.getStudent_project();
      that.getStudent_week();
      that.getStudent_sprotRatio();
    },
    getNowTime () {
      let dateTime
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
        :
        new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
        :
        new Date().getSeconds()
      dateTime = yy + '-' + mm + '-' + dd
      console.log(dateTime)
      return dateTime
    },
    /**
     * 请求数据开始
     */
    getTab(index) {
      console.log(index);
      this.falg = index;
      this.sportTimesScore = this.projectList[index].sportTimesScore * 100;
      this.sportDurationScore = this.projectList[index].sportDurationScore * 100;
      this.initActCompleteRateChart();
    },
    //查询打卡记录
    getStudent_record() {
      this.$http({
        url: this.$http.requestUrl("/sport/portal/stu/clockInRecord"),
        method: "get",
        params: this.$http.requestParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          const date = data.dataList;
          let arr = [];
          for (let i in date) {
            console.log(date[i]);
            if (date[i]) {
              arr.push(date[i]);
            }
          }
          console.log(arr, "90900");
          const tranefMap = new Map();
          arr.map((item) => {
            const month = new Date(item.sportDate).getMonth() + 1;
            const year = new Date(item.sportDate).getFullYear();
            if (tranefMap.get(month) != undefined) {
              const children = tranefMap.get(month);
              children.push(item);
            } else {
              tranefMap.set(month, [item]);
            }
          });
          const result = [];
          tranefMap.forEach((val, key) => {
            result.push({
              date: key,
              child: val,
            });
          })
        
          result.map((ele) => {
            ele.child.map((item) => {
              item.day = new Date(item.sportDate).getDate();
              const month = new Date(item.sportDate).getMonth() + 1;
              const year = new Date(item.sportDate).getFullYear();
              ele.timestr = year + "年" + (month < 10 ? "0" + month : month) + "月";
              this.calendarData.map((ele_c) => {
                if (ele_c.timestr == ele.timestr) {
                  ele_c.list.map((item_c) => {
                    if (item.day == item_c.day) {
                      if (0 < item.clockInResult && item.clockInResult < 1) {
                        item_c.type = "cpl-clr";
                      } else if (1 < item.clockInResult && item.clockInResult < 1.3) {
                        item_c.type = "no-sign-clr";
                      } else if (1.3 < item.clockInResult || item.clockInResult == 1.3) {
                        item_c.type = "no-cpl-clr";
                      } else {
                        item_c.type = "cpl-clr";
                      }
                    }
                  });
                }
              });
            });
          });
          let resultArr = result.reverse();
          if(resultArr.length < 4){
            console.log('90900909')
            for(var i = 0;i < 5-resultArr.length; i++){
              result.push({
                timestr: ''
              })
            }
          }
          this.calendarData.map((ele,index) =>{
            resultArr[index].timestr = ele.timestr
          })
          this.recordList = resultArr
          console.log(this.recordList,this.calendarData,'poppopo22')
        }
      });
    },
  
    // 学生端查询当前方案
    getStudent_plan() {
      let para = {
        date: this.date,
      };
      this.$http({
        url: this.$http.requestUrl("/sport/portal/stu/plan"),
        method: "post",
        data: JSON.stringify(para),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.dataList
          this.prescription = data.dataList.prescription;
          this.spotTarget = data.dataList.spotTarget
          this.note = data.dataList.note
          console.log(this.prescription, "prescription");
        }
      });
    },
    // 学生端查询当前运动项目
    getStudent_project() {
      let para = {
        date: this.date,
      };
      this.$http({
        url: this.$http.requestUrl("/sport/portal/stu/project"),
        method: "post",
        data: JSON.stringify(para),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.dataList.map((ele) => {
            this.lineList.push(ele.sportCode);
          });
          this.projectList = data.dataList;
          this.sportTimesScore = this.projectList[0].sportTimesScore * 100;
          this.sportDurationScore = this.projectList[0].sportDurationScore * 100;
          this.initActCompleteRateChart();
          console.log(this.projectList, "90900909");
        }
      });
    },
    // 学生端 查询本周云动目标
    getStudent_week() {
      let para = {
        date: this.date,
      };
      this.$http({
        url: this.$http.requestUrl("/sport/portal/stu/week"),
        method: "post",
        data: JSON.stringify(para),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.weekList = data.dataList;
        }
      });
    },
    // 学生端 查询本周运动完成率
    getStudent_sprotRatio() {
      let para = {
        date: this.date,
      };
      this.$http({
        url: this.$http.requestUrl("/sport/portal/stu/sprotRatio"),
        method: "post",
        data: JSON.stringify(para),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          (this.Ratio_sportTimesScore = data.dataList.sportTimesScore),
            (this.Ratio_sportDurationScore = data.dataList.sportDurationScore);
          this.initActCompletesprotRatio();
        }
      });
    },
    /**
     * 请求数据结束
     */
    forMatArgs: function () {
      let markDate = this.markDate;
      let markDateMore = this.markDateMore;
      markDate = markDate.map((k) => {
        return timeUtil.dateFormat(k);
      });
      markDateMore = markDateMore.map((k) => {
        k.date = timeUtil.dateFormat(k.date);
        return k;
      });
      return [markDate, markDateMore];
    },
    getList: function (date, chooseDay, isChosedDay = true) {
      const [markDate, markDateMore] = this.forMatArgs();
      this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
      let arr = timeUtil.getMonthList(this.myDate);
      console.log(arr);
      for (let i = 0; i < arr.length; i++) {
        let markClassName = "";
        let k = arr[i];
        k.chooseDay = false;
        const nowTime = k.date;
        k.day = k.date.split("/")[2];
        const t = new Date(nowTime).getTime() / 1000;
        //看每一天的class
        for (const c of markDateMore) {
          if (c.date === nowTime) {
            markClassName = c.className || "";
          }
        }
        //标记选中某些天 设置class
        k.markClassName = markClassName;
        k.isMark = markDate.indexOf(nowTime) > -1;
        //无法选中某天
        k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
        if (k.isToday) {
          this.$emit("isToday", nowTime);
        }
        let flag = !k.dayHide && k.otherMonth === "nowMonth";
        if (chooseDay && chooseDay === nowTime && flag) {
          this.$emit("choseDay", nowTime);
          this.historyChose.push(nowTime);
          k.chooseDay = true;
        } else if (
          this.historyChose[this.historyChose.length - 1] === nowTime &&
          !chooseDay &&
          flag
        ) {
          k.chooseDay = true;
        }
      }
      return arr;
    },
    toCreate() {
      this.$router.push({ name: "choosePrescription" });
    },
    initActCompleteRateChart() {
      let _actCompleteRateChart = echarts.init(
        document.getElementById("actCompleteRateChart")
      );
      // let _actCompleteRateChart2 = echarts.init(
      //   document.getElementById("actCompleteRateChart2")
      // );
      // let _avgActStrengthChart = echarts.init(
      //   document.getElementById("avgActStrengthChart")
      // );

      let data = {
        运动强度: 120,
        运动频率: this.sportTimesScore,
        运动时长: this.sportDurationScore,
      };
      let option = {
        title: {
          text: "运动完成率",
          x: "25%",
          y: "73%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 18,
          },
        },
        legend: {
          show: true,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function (params, b) {
            return params + "\n\n" + (data[params] / 180).toFixed(2) * 100 + "%";
          },
          textStyle: {
            fontSize: 14,
          },
          data: [{ name: "运动强度" }, { name: "运动频率" }, { name: "运动时长" }],
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name: "运动强度",
            endAngle: 0,
            center: ["32%", "78%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#A3E0D6"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120,
              },
            ],
          },
          {
            type: "gauge",
            name: "运动频率",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "80%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#AFD2F3"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: this.sportTimesScore,
              },
            ],
          },
          {
            type: "gauge",
            name: "运动时长",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "60%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#F3AF5C",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#EFD9B0"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: this.sportDurationScore,
              },
            ],
          },
        ],
      };

      _actCompleteRateChart.setOption(option);
      // _actCompleteRateChart2.setOption(option);

      // let avgOption = Object.assign({}, option);
      // _avgActStrengthChart.setOption(avgOption);

      window.addEventListener("resize", () => {
        _actCompleteRateChart.resize();
        // _actCompleteRateChart2.resize();
        // _avgActStrengthChart.resize();
      });
    },
    initActCompletesprotRatio() {
      let _avgActStrengthChart = echarts.init(
        document.getElementById("avgActStrengthChart")
      );

      let data = {
        运动强度: 120,
        运动频率: this.Ratio_sportTimesScore,
        运动时长: this.Ratio_sportDurationScore,
      };
      let option = {
        title: {
          text: "运动完成率",
          x: "25%",
          y: "73%",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 18,
          },
        },
        legend: {
          show: true,
          icon: "circle",
          right: "15%",
          top: "32%",
          orient: "vertical",
          formatter: function (params, b) {
            return params + "\n\n" + (data[params] / 180).toFixed(2) * 100 + "%";
          },
          textStyle: {
            fontSize: 14,
          },
          data: [{ name: "运动强度" }, { name: "运动频率" }, { name: "运动时长" }],
        },
        series: [
          // 主图
          {
            type: "gauge",
            startAngle: 180,
            name: "运动强度",
            endAngle: 0,
            center: ["32%", "78%"],
            radius: "100%",
            min: 0,
            max: 180,
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#4DBDAE",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#A3E0D6"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 120,
              },
            ],
          },
          {
            type: "gauge",
            name: "运动频率",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "80%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#659EED",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#AFD2F3"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: this.Ratio_sportTimesScore,
              },
            ],
          },
          {
            type: "gauge",
            name: "运动时长",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 180,
            center: ["32%", "78%"],
            radius: "60%",
            splitNumber: 12,
            itemStyle: {
              normal: {
                color: "#F3AF5C",
              },
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, "#EFD9B0"]],
                width: 18,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: this.Ratio_sportDurationScore,
              },
            ],
          },
        ],
      };

      let avgOption = Object.assign({}, option);
      _avgActStrengthChart.setOption(avgOption);

      window.addEventListener("resize", () => {
        _avgActStrengthChart.resize();
      });
    },
    initTodayActStrengthChart() {
      this.todayActStrengthChart = echarts.init(
        document.getElementById("todayActStrengthChart")
      );
      console.log(this.todayActStrengthChart);
      let colors = ["#4DBDAE", "#659EED", "#F3AF5C"];
      this.todayActStrengthChart.setOption({
        title: {
          text: "当日项目运动强度",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["跑步", "跳绳", "仰卧起坐"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000000",
              opacity: 0.06,
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.25)",
              fontSize: 18,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          interval: 25,
          max: 100,
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              color: "rgba(0, 0, 0, 0.25)",
              fontSize: 18,
            },
          },
        },
        series: [
          {
            data: [28, 100, 55],
            type: "bar",
            axisTick: {
              show: false,
            },
            barWidth: 10,
            showBackground: false,
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                shadowBlur: 5,
                shadowOffsetX: 5,
                shadowOffsetY: 0,
                color: function (params) {
                  return colors[params.dataIndex];
                },
                shadowColor: "#CBF9F2",
              },
            },
          },
        ],
      });
    },
    initCompleteRateChart() {
      this.todayActStrengthChart = echarts.init(
        document.getElementById("completeRateChart")
      );
      var dataname = ["第一阶段", "第二阶段", "第三阶段", "第四阶段", "第五阶段"];
      var datamax = [20, 20, 20, 20, 20, 20];
      var datavaule = [9, 16, 16, 15, 12, 8];
      var datavaule1 = [6, 8, 10, 6, 5, 8];

      var indicator = [];
      for (var i = 0; i < dataname.length; i++) {
        indicator.push({
          name: dataname[i],
          max: datamax[i],
        });
      }

      let option = {
        title: {
          text: "完成率分析",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          data: ["当前运动强度", "目标强度"],
          type: "scroll",
          orient: "vertical",
          icon: "circle",
          right: "100",
          top: "center",
          itemGap: 14,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: "15",
            color: "#656565",
          },
        },
        radar: {
          center: ["30%", "60%"],
          radius: "65%",
          startAngle: 90,
          splitNumber: 5,
          splitArea: {
            areaStyle: {
              color: ["#FFFFFF", "#F5F9FF"].reverse(),
            },
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D2E4F8",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#D2E4F8",
            },
          },
          name: {
            formatter: "{value}",
            textStyle: {
              color: "#C6D4D0",
              fontSize: 15,
            },
          },
          indicator: indicator,
        },
        series: [
          {
            name: "当前运动强度",
            type: "radar",
            symbol: "none",
            symbolSize: 6,
            areaStyle: {
              normal: {
                color: "#659EED",
              },
            },
            itemStyle: {
              color: "#659EED",
            },
            lineStyle: {
              normal: {
                color: "#659EED",
                width: 1,
              },
            },
            data: [datavaule],
          },
          {
            name: "目标强度",
            type: "radar",
            symbol: "none",
            symbolSize: 6,
            areaStyle: {
              normal: {
                color: "#4DBDAE",
              },
            },
            itemStyle: {
              color: "#4DBDAE",
            },
            lineStyle: {
              normal: {
                color: "#4DBDAE",
                width: 1,
              },
            },
            data: [datavaule1],
          },
        ],
      };
      this.todayActStrengthChart.setOption(option);
    },
    initExerciseIntensityChart() {
      this.exerciseIntensityChart = echarts.init(
        document.getElementById("exerciseIntensityChart")
      );

      let option = {
        title: {
          text: "每周心率",
          textStyle: {
            color: "#2F5A54",
            fontWeight: 500,
            fontSize: 24,
          },
        },
        color: [
          new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
            {
              offset: 0,
              color: "#AD4DBD",
            },
            {
              offset: 0.5,
              color: "#9C45E2",
            },
            {
              offset: 1,
              color: "#E844B6",
            },
          ]),
          new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
            {
              offset: 0,
              color: "#4DBDAE",
            },
            {
              offset: 0.5,
              color: "#4595E2",
            },
            {
              offset: 1,
              color: "#4490E8",
            },
          ]),
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        legend: {
          data: ["各阶段运动强度", "各阶段目标强度"],
          orient: "horizontal",
          icon: "roundRect",
          show: true,
          right: "20%",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: ["第一阶段", "第二阶段", "第三阶段"],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.25)",
              fontSize: 18,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#999",
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 0.25)",
              fontSize: 18,
            },
          },
        },
        series: [
          {
            name: "各阶段运动强度",
            type: "line",
            smooth: true,
            symbol: "none", //去掉圆点
            data: [12, 11, 6],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 5, // 0.1的线条是非常细的了
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
                    {
                      offset: 0,
                      color: "#AD4DBD",
                    },
                    {
                      offset: 0.5,
                      color: "#9C45E2",
                    },
                    {
                      offset: 1,
                      color: "#E844B6",
                    },
                  ]), //线条渐变色
                },
              },
            },
          },
          {
            name: "各阶段目标强度",
            type: "line",
            symbol: "none", //去掉圆点
            smooth: true,
            data: [9, 11, 13],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 5, // 0.1的线条是非常细的了
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
                    {
                      offset: 0,
                      color: "#4DBDAE",
                    },
                    {
                      offset: 0.5,
                      color: "#4595E2",
                    },
                    {
                      offset: 1,
                      color: "#4490E8",
                    },
                  ]), //线条渐变色
                },
              },
            },
          },
        ],
      };

      this.exerciseIntensityChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.heal-guidance-program {
  padding: 20px;
  background: #dbf3ed;
  height: 100%;
  width: 100%;
  > div {
    width: 1513px;
  }

  .my-program {
    .cons-items {
      .header-cantainer {
        width: 100%;
        height: 168px;
        background: #dbf3ed;
        border-radius: 25px;
        display: flex;
        align-items: center;
        .cantainer-c {
          width: 127px;
          height: 168px;
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          border-radius: 25px 0px 0px 25px;
          text-align: center;
          padding-top: 49px;
          .img-header {
            width: 35px;
            height: 39px;
          }
          .my-title {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }

        .su-mu {
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2f5a54;
          display: flex;
          .padding-left {
            padding-left: 20px;
          }
          .tip {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #2f5a54;
            margin-right: 10px;
          }
        }
      }
      margin-bottom: 36px;
      padding: 30px;
      background: #edfdf9;
      border-radius: 25px;
      box-sizing: border-box;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
      width: max-content;
      // min-height: 400px;
      .main-item {
        width: 100%;
        min-height: 168px;
        display: flex;
        background: #edfdf9;
        border-radius: 25px 25px 0px 0px;
        border-bottom-left-radius: 25px;
        box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
        position: relative;
        overflow: hidden;
        margin-right: 50px;
        top: -12px;
        .m-header {
          background: linear-gradient(49deg, #4dbdae 0%, #4dbdae 100%);
          line-height: 70px;
          text-align: center;
          font-size: 24px;
          color: #ffffff;
        }
        .con {
          padding: 20px;
          box-sizing: border-box;
          .name {
            font-size: 18px;
            color: #2f5a54;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name-str {
              font-size: 20px;
              color: #2f5a54;
              font-weight: 600;
            }
          }
        }
        .remark {
          .rmk-tit {
            color: #2f5a54;
            font-size: 18px;
            font-weight: 500;
            margin: 22px 0px;
          }
          .desc {
            background: #dbf3ed;
            font-size: 16px;
            color: #2f5a54;
            line-height: 26px;
            padding: 10px;
            border-radius: 10px;
            box-sizing: border-box;
            max-height: 200px;
            overflow-y: auto;
          }
        }
        .btns {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .choose-btn {
            border-color: #4dbdae;
            background: #4dbdae;
            box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1);
            color: #fff;
            border-radius: 10px;
          }
        }
      }
      .item-response {
        min-width: 1480px;
        max-width: 1480px;
        overflow-y: hidden;
        .sub-items {
          display: inline-flex;
        }
      }
      .sub-itemss {
        // display: flex;
        // padding: 27px;
        padding-right: 0px !important;
        .sub-item {
          margin-right: 20px;
          min-width: 283px;
          .s-header {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 56px;
            background: #659eed;
            border-radius: 10px;
            padding: 0px 25px;
            font-size: 16px;
            margin-bottom: 12px;
          }
          .childrens {
            display: flex;
            align-items: center;
            .child-item {
              min-width: 283px;
              margin-right: 12px !important;
            }
            .child-item:last-child {
              margin-right: 0px !important;
            }
          }
          .second-bg {
            background: #f3af5c;
          }
          .third-bg {
            background: #fb8885;
          }
          .con {
            background: #dbf3ed;
            border-radius: 10px;
            overflow: hidden;
            .icon-h-row {
              background-color: #bee5db;
              line-height: 102px;
              height: 102px;
              //background-image: url("../../../assets/img/motion_icon.png");
              //background-repeat: no-repeat;
              //background-size: 56px 56px;
              //background-position: 10%;
              display: flex;
              align-items: center;
              .img-box {
                width: 56px;
                height: 56px;
                display: flex;
                align-items: center;
                margin-left: 24px;
                margin-right: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .str-box {
                // margin-left: 100px;
              }
              .name {
                font-size: 18px;
                color: #2f5a54;
                display: block;
                line-height: 18px;
                margin-bottom: 6px;
              }
              .name-str {
                font-size: 24px;
                color: #2f5a54;
                font-weight: 500;
                line-height: 24px;
                display: block;
              }
            }
            .desc-items {
              font-size: 16px;
              color: #2f5a54;
              padding: 0px 24px 24px 24px;
              .field {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                line-height: 18px;
                .label {
                }
                .val {
                  font-size: 18px;
                  color: #2f5a54;
                  font-weight: 500;
                }
              }
            }
          }
        }
        .sub-item:last-child {
          margin-right: 0px;
        }
      }
    }
  }
  .other-panel {
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    .today-targets {
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .main-item {
          width: 350px;
          height: 116px;
          background: #edfdf9;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          border-radius: 20px;
          padding: 23px 29px;
          display: flex;
          align-items: center;

          .act-con {
            margin-left: 27px;
            span {
              display: block;
              font-size: 18px;
              color: #2f5a54;
            }
            .name {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
        .item {
          width: 350px;
          height: 116px;
          border-radius: 20px;
          margin-left: 36px;
          color: #fff;
          .top-desc {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 30px;
            margin-left: 80px;
            margin-right: 20px !important;
          }
          .progress-bar {
            position: relative;
            height: 10px;
            border-radius: 6px;
            width: calc(100% - 150px);
            margin-left: 80px;
            margin-right: 10px;
            margin-top: 24px;
            .bar {
              position: absolute;
              left: 0px;
              top: 0px;
              height: 100%;
              border-radius: 6px;
              background: #fff;
              transition: 0.2s all linear;
            }
            .val {
              position: absolute;
              right: -50px;
              top: -8px !important;
              font-size: 18px;
            }
          }
          .progress-bar1 {
            background: #b28145;
          }
          .progress-bar2 {
            background: #5d8fd5;
          }
          .progress-bar3 {
            background: #4d9e95;
          }
        }
        .item:first-child {
          margin-left: 0px;
        }
        .sub-item1 {
          background-color: #f3af5c;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/acttimeline.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item2 {
          background-color: #659eed;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actnum.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
        .sub-item3 {
          background-color: #4dbdae;
          box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
            -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
          background-image: url("../../../assets/img/actqd.png");
          background-repeat: no-repeat;
          background-position: 10%;
          background-size: 35px 35px;
        }
      }
    }
    .current-period {
      .row {
        .main-item {
          width: 740px;
          .act-con {
            display: flex;
            width: 100%;
            justify-content: space-between;
            .status {
              font-size: 24px;
              font-weight: 500;
              color: #2f5a54;
            }
          }
        }
      }
    }
  }
  .dob-chart-box {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    .tit {
      font-size: 24px;
      color: #2f5a54;
      font-weight: 500;
      margin-bottom: 30px;
    }
    > div {
      width: 740px;
      // height: 414px;
      background: #edfdf9;
      box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
        -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
      border-radius: 25px;
      padding: 36px 30px;
    }
    .right {
      margin-left: 30px;
      width: 741px;
      .chart-tabs {
        color: #2f5a54;
        font-size: 24px;
        font-weight: 500;
        span {
          cursor: pointer;
          margin-right: 31px;
          position: relative;
        }
        .active {
          color: #4dbdae;
          &:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 0px;
            width: 100%;
            height: 4px;
            background: #4dbdae;
            border-radius: 1px;
          }
        }
      }
      .sub-chart-box {
        height: 100%;
        width: 100%;
      }
    }
  }
  .sign-in-records {
    width: 1512px;
    background: #edfdf9;
    box-shadow: 5px 5px 8px 0px rgba(201, 231, 225, 1),
      -5px -5px 8px 0px rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    padding: 0px 29px;
    padding-bottom: 30px;
    .tit {
      font-size: 24px;
      font-weight: 500;
      color: #2f5a54;
      margin-top: 48px;
      display: inline-block;
    }
    .types {
      margin-top: 26px;
      display: flex;
      span {
        font-size: 14px;
        color: #2f5a54;
        position: relative;
        margin-right: 44px;
        padding-left: 35px;
        cursor: pointer;
      }

      .no-sign:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #dddddd;
      }
      .no-cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #f3af5c;
      }
      .cpltoday-target:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4cbd8e;
      }
      .exceed:after {
        content: "";
        height: 6px;
        position: absolute;
        width: 24px;
        bottom: 5px;
        border-radius: 6px;
        left: 0px;
        background: #4493e5;
      }
    }
    .sign-calendars {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 30px;
    }
    .calendar-item {
      margin-right: 30px;
      width: 378px;
      .tit {
        margin-left: 10px;
      }
      .week-items {
        display: flex;
        span {
          font-size: 12px;
          color: #a8b4b1;
          text-align: center;
          width: 54px;
          height: 50px;
          display: inline-block;
          line-height: 50px;
          font-weight: bold;
        }
      }
      .week-days {
        display: flex;
        flex-wrap: wrap;
        span {
          color: #000000;
          font-size: 16px;
          position: relative;
          padding: 0px 10px;
          text-align: center;
          width: 100%;
          width: 54px;
          line-height: 50px;
          height: 50px;
          display: inline-block;
        }
        .cpl-clr:after {
          content: "";
          height: 6px;
          position: absolute;
          width: calc(100% - 20px);
          bottom: -5px;
          border-radius: 6px;
          left: 10px;
          background: #4cbd8e;
        }
        .no-sign-clr:after {
          content: "";
          height: 6px;
          position: absolute;
          width: calc(100% - 20px);
          bottom: -5px;
          border-radius: 6px;
          left: 10px;
          background: #dddddd;
        }
        .no-cpl-clr:after {
          content: "";
          height: 6px;
          position: absolute;
          width: calc(100% - 20px);
          bottom: -5px;
          border-radius: 6px;
          left: 10px;
          background: #f3af5c;
        }
        .exceed-clr:after {
          content: "";
          height: 6px;
          position: absolute;
          width: calc(100% - 20px);
          bottom: -5px;
          border-radius: 6px;
          left: 10px;
          background: #4493e5;
        }
        .other-day {
          color: #a8b4b1;
        }
      }
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table tr th {
        font-size: 12px;
        color: #a8b4b1;
        width: 54px;
        text-align: center;
      }
      table tr {
        line-height: 50px;
        td {
          padding: 0px 10px;
          text-align: center;
          width: 54px;
        }
      }
      table tr td a {
        color: #000000;
        font-size: 16px;
        position: relative;
        display: inline-block;
        text-align: center;
        width: 100%;
      }
      .other-day {
        color: #a8b4b1;
      }
    }
  }
  .empty-proc {
    background: url("../../../assets/img/proc_empty_icon.png");
    background-size: 243px 214px;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 410px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    .create-proc-btn {
      width: 260px;
      height: 70px;
      background: #4dbdae;
      color: #fff;
      font-size: 18px;
      background-image: url("../../../assets/img/create_proc.png");
      background-repeat: no-repeat;
      background-size: 32px 32px;
      background-position: 15%;
      border-radius: 12px;
      transition: 0.2s all linear;
      &:hover {
        opacity: 0.8;
      }
      &:focus {
        border-color: inherit !important;
      }
    }
  }
}
</style>
